<template>
    <view class="deposit-container">
        <div class="title">{{$t('mine.wallet.recordDetail.title')}}</div>
        <view class="list">
            <view class="item">
                <view class="name">{{$t('mine.wallet.recordDetail.id')}}</view>
                <view class="content">{{detail.orderNo}}</view>
            </view>
            <view class="item">
                <view class="name">{{$t('mine.wallet.recordDetail.time')}}</view>
                <view class="content">{{ formatDate(detail.createTime) }}</view>
            </view>
            <view class="item">
                <view class="name">{{$t('mine.wallet.recordDetail.amount')}}</view>
                <view class="content">{{ formatAmountWithSign(String(detail.amount) ?? '0.00') }}</view>
            </view>
            <view class="item">
                <view class="name">{{$t('mine.wallet.recordDetail.remark')}}</view>
                <view class="content">{{detail.remark}}</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { formatDate } from "@/utils/date";
import { formatAmountWithSign } from '@/utils/common';
const props = defineProps({
    row: {
        type: Object,
        default: () => ({})
    }
});

const detail = ref(props.row || {});

onLoad(() => {});
</script>

<style lang="scss" scoped>
.deposit-container {
    background: #fff;
    height: 680rpx;
    border-radius: 30rpx 30rpx 0 0;
    padding: 0 30rpx;
    .title {
        padding: 70rpx 0 40rpx;
        text-align: center;
        font-size: 46rpx;
        font-weight: 600;
    }
    .list {
        padding: 0 80rpx;
        .item {
            display: flex;
            justify-content: space-between;
            margin-top: 60rpx;
            font-size: 32rpx;
            .name {
                color: #656466;
            }
        }
    }
}
</style>
